<!DOCTYPE html>
<html  lang="zh">
<head><link rel=manifest href=/manifest.json>
    <meta charset="utf-8" />

<meta name="generator" content="Hexo 4.1.1" />

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

 <!-- pwa 配置-->
 <link rel="apple-touch-icon" href="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.7/pwa/apple-touch-icon.png">
 <meta name="theme-color" content="white"/>
 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">


<title>初级前端综合面试题-1 - Fox - Future diary</title>


    <meta name="description" content="[TOC] 一、cookie、sessionStorage和localStorage的区别答：">
<meta property="og:type" content="article">
<meta property="og:title" content="初级前端综合面试题-1">
<meta property="og:url" content="https://foxhuli.top/posts/a57c.html">
<meta property="og:site_name" content="Fox - Future diary">
<meta property="og:description" content="[TOC] 一、cookie、sessionStorage和localStorage的区别答：">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3869059026,1837585635&fm=26&gp=0.jpg">
<meta property="article:published_time" content="2020-03-20T15:28:16.000Z">
<meta property="article:modified_time" content="2020-04-26T05:44:02.959Z">
<meta property="article:author" content="Fox">
<meta property="article:tag" content="前端面试">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3869059026,1837585635&fm=26&gp=0.jpg">



<link rel="canonical" href="https://foxhuli.top/" />





<link rel="icon" href="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.6/images/foxfavicon.png">


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.7.2/css/bulma.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu:400,600|Source+Code+Pro">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/atom-one-dark.css">


    
    
<style>body>.footer,body>.navbar,body>.section{opacity:0}</style>

    
    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@1.6.8/dist/css/lightgallery.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/justifiedGallery@3.7.0/dist/css/justifiedGallery.min.css">

    
    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/outdatedbrowser@1.1.5/outdatedbrowser/outdatedbrowser.min.css">

    
    
    
    
<link rel="stylesheet" href="/css/back-to-top.css">

    
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-160296449-1"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'UA-160296449-1');
</script>

    
    <script>
var _hmt = _hmt || [];
(function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?14528986";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
})();
</script>
    
    
    
    <link rel="stylesheet" href="/css/progressbar.css">
<script src="https://cdn.jsdelivr.net/npm/pace-js@1.0.2/pace.min.js"></script>
    
    <script async="" src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    


<link rel="stylesheet" href="/css/style.css">

<link rel="alternate" href="/atom.xml" title="Fox - Future diary" type="application/atom+xml">
</head>
<body class="is-3-column">
    <nav class="navbar navbar-main">
    <div class="container">
        <div class="navbar-brand is-flex-center">
            <a class="navbar-item navbar-logo" href="/">
                <div>
                    
                        <img src="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.5/images/foxlogo.png" alt="初级前端综合面试题-1" height="28">
                    
                </div>
            </a>
        </div>
        <div class="navbar-menu">
            
            <div class="navbar-start">
                
                <a class="navbar-item"
                href="/">首页</a>
                
                <a class="navbar-item"
                href="/archives">归档</a>
                
                <a class="navbar-item"
                href="/categories">分类</a>
                
                <a class="navbar-item"
                href="/tags">标签</a>
                
                <a class="navbar-item"
                href="/contact">留言板</a>
                
                <a class="navbar-item"
                href="/friends">友情链接</a>
                
                <a class="navbar-item"
                href="/about">关于</a>
                
            </div>
            
            <div class="navbar-end">
                
                
                <a class="navbar-item is-hidden-tablet catalogue" title="目录" href="javascript:;">
                    <i class="fas fa-list-ul"></i>
                </a>
                
                
                <a class="navbar-item search" title="搜索" href="javascript:;">
                    <i class="fas fa-search"></i>
                </a>
                
            </div>
        </div>
    </div>
</nav>
    


    <section class="section">
        <div class="container">
            <div class="columns">
                <div class="column is-8-tablet is-8-desktop is-6-widescreen has-order-2 column-main">
<div class="card">
    
    <div class="card-image">
        <span  class="image is-7by1">
            <img class="thumbnail" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3869059026,1837585635&amp;fm=26&amp;gp=0.jpg" alt="初级前端综合面试题-1">
        </span>
    </div>
    
    <div class="card-content article ">
        
        <div class="level article-meta is-size-7 is-uppercase is-mobile is-overflow-x-auto">
            <div class="level-left">
                <time class="level-item has-text-grey" datetime="2020-03-20T15:28:16.000Z">2020-03-20</time>
                
                <div class="level-item">
                <a class="has-link-grey -link" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>&nbsp;/&nbsp;<a class="has-link-grey -link" href="/categories/%E5%89%8D%E7%AB%AF/%E9%9D%A2%E8%AF%95/">面试</a>
                </div>
                
                
                <span class="level-item has-text-grey">
                    
                    
                    37 分钟 读完 (大约 5603 个字)
                </span>
                
                
                <span class="level-item has-text-grey" id="busuanzi_container_page_pv">
                    <i class="far fa-eye"></i>
                    的 <span id="busuanzi_value_page_pv">0</span> 次陪伴
                </span>
                
            </div>
        </div>
        
        <h1 class="title is-size-3 is-size-4-mobile has-text-weight-normal">
            
                初级前端综合面试题-1
            
        </h1>
        <div class="content">
            <p>[TOC]</p>
<h2 id="一、cookie、sessionStorage和localStorage的区别"><a href="#一、cookie、sessionStorage和localStorage的区别" class="headerlink" title="一、cookie、sessionStorage和localStorage的区别"></a>一、cookie、sessionStorage和localStorage的区别</h2><p>答：<img src="https://img-blog.csdnimg.cn/20190530212538979.png" alt="区别"><br><a id="more"></a></p>
<h3 id="1、存储大小"><a href="#1、存储大小" class="headerlink" title="1、存储大小"></a>1、存储大小</h3><ul>
<li>cookie只能存储 4K的数据，每个域名一般存储量不超过20个。</li>
<li>localstorage和sessionstorage，存储大小为 5mb</li>
</ul>
<h3 id="2、有效期"><a href="#2、有效期" class="headerlink" title="2、有效期"></a>2、有效期</h3><ul>
<li>cookie有效期可以自己自定义，未设置有效期是浏览器关闭后则被删除，设置有效期后则将数据存储到 硬盘中。默认不会存储到硬盘。（同一个浏览器，同一个标签页/不同的标签页 均可共享）</li>
<li>localstorage一直存储在客户端，除非用户自行删除或者清除缓存，否则一直存在。（同一个浏览器，同一个标签页/不同的标签页 均可共享）</li>
<li>sessionstorage：存储在客户端，默认关闭浏览器则自行删除。（不同浏览器，同一个标签页 均可以共享）</li>
</ul>
<h3 id="3、运用场景"><a href="#3、运用场景" class="headerlink" title="3、运用场景"></a>3、运用场景</h3><ul>
<li>cookie一般用于存储不敏感信息且使用较广（安全性较低，不建议使用）</li>
<li>sessionstorage：用于存储 一次性数据，关闭浏览器则被丢弃。</li>
<li>localstorage：一般用于登录验证，存储用户登录信息。</li>
</ul>
<h3 id="4、安全性、服务端通信"><a href="#4、安全性、服务端通信" class="headerlink" title="4、安全性、服务端通信"></a>4、安全性、服务端通信</h3><ul>
<li>cookie安全性较低，容易被人攻击，或者串改信息。每次请求不管服务端是否需要，都会携带cookie，从而降低了传输带宽</li>
<li>sessionstorage：不用参与服务端，一直存储到客户端，接口可以直接使用，安全性较高。</li>
<li>localstorage：不用参与服务端，一直存储到客户端，接口可以直接使用，安全性较高。</li>
</ul>
<h3 id="5、作用域"><a href="#5、作用域" class="headerlink" title="5、作用域"></a>5、作用域</h3><ul>
<li>cookie作用域同一个浏览器，同一个标签页/不同的标签页 均可共享</li>
<li>localstorage：同一个浏览器，同一个标签页/不同的标签页 均可共享</li>
<li>sessionstorage：不同浏览器，同一个标签页 均可以共享</li>
</ul>
<h3 id="6、存储位置"><a href="#6、存储位置" class="headerlink" title="6、存储位置"></a>6、存储位置</h3><ul>
<li>cookie：一般存储 浏览器客户端</li>
<li>localstorage：一般存储 浏览器客户端</li>
<li>sessionstorage：一般存储 浏览器客户端</li>
</ul>
<h3 id="7、机制不同"><a href="#7、机制不同" class="headerlink" title="7、机制不同"></a>7、机制不同</h3><ul>
<li>cookie：每次请求接口时，均要携带所有cookie值</li>
<li>localstorage：不参与接口机制，但是接口可以直接使用</li>
<li>essionstorage：不用参与服务端，接口可以直接使用</li>
</ul>
<h3 id="8、参考文献"><a href="#8、参考文献" class="headerlink" title="8、参考文献"></a>8、参考文献</h3><p>【1】 <a href="https://blog.csdn.net/weixin_42614080/article/details/90706499">https://blog.csdn.net/weixin_42614080/article/details/90706499</a></p>
<h2 id="二、HTTP状态码"><a href="#二、HTTP状态码" class="headerlink" title="二、HTTP状态码"></a>二、HTTP状态码</h2><p>HTTP状态码由三个十进制数字组成，第一个十进制数字定义了状态码的类型，后两个数字没有分类的作用。HTTP状态码共分为5种类型。</p>
<div class="table-container">
<table>
<thead>
<tr>
<th>分类</th>
<th>分类描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>1**</td>
<td>信息，服务器收到请求，需要请求者继续执行操作</td>
</tr>
<tr>
<td>2**</td>
<td>成功，操作被成功接收并处理</td>
</tr>
<tr>
<td>3**</td>
<td>重定向，需要进一步的操作以完成请求</td>
</tr>
<tr>
<td>4**</td>
<td>客户端错误，请求包含语法错误或无法完成请求</td>
</tr>
<tr>
<td>5**</td>
<td>服务器错误，服务器在处理请求的过程中发生了错误</td>
</tr>
</tbody>
</table>
</div>
<h3 id="HTTP状态码表（版本1）-此表含状态码英文名称"><a href="#HTTP状态码表（版本1）-此表含状态码英文名称" class="headerlink" title="HTTP状态码表（版本1） 此表含状态码英文名称"></a>HTTP状态码表（版本1） 此表含状态码英文名称</h3><div class="table-container">
<table>
<thead>
<tr>
<th>状态码</th>
<th>状态码英文名称</th>
<th>中文描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>1开头的状态码</td>
<td></td>
<td></td>
</tr>
<tr>
<td>100</td>
<td>Continue</td>
<td>继续。客户端应继续其请求</td>
</tr>
<tr>
<td>101</td>
<td>Switching Protocols</td>
<td>切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议，例如，切换到HTTP的新版本协议</td>
</tr>
<tr>
<td>2开头的状态码</td>
<td></td>
<td></td>
</tr>
<tr>
<td>200</td>
<td>OK</td>
<td>请求成功。一般用于GET与POST请求</td>
</tr>
<tr>
<td>201</td>
<td>Created</td>
<td>已创建。成功请求并创建了新的资源</td>
</tr>
<tr>
<td>202</td>
<td>Accepted</td>
<td>已接受。已经接受请求，但未处理完成</td>
</tr>
<tr>
<td>203</td>
<td>Non-Authoritative Information</td>
<td>非授权信息。请求成功。但返回的meta信息不在原始的服务器，而是一个副本</td>
</tr>
<tr>
<td>204</td>
<td>No Content</td>
<td>无内容。服务器成功处理，但未返回内容。在未更新网页的情况下，可确保浏览器继续显示当前文档</td>
</tr>
<tr>
<td>205</td>
<td>Reset Content</td>
<td>重置内容。服务器处理成功，用户终端（例如：浏览器）应重置文档视图。可通过此返回码清除浏览器的表单域</td>
</tr>
<tr>
<td>206</td>
<td>Partial Content</td>
<td>部分内容。服务器成功处理了部分GET请求</td>
</tr>
<tr>
<td>3开头的状态码</td>
<td></td>
<td></td>
</tr>
<tr>
<td>300</td>
<td>Multiple Choices</td>
<td>多种选择。请求的资源可包括多个位置，相应可返回一个资源特征与地址的列表用于用户终端（例如：浏览器）选择</td>
</tr>
<tr>
<td>301</td>
<td>Moved Permanently</td>
<td>永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替</td>
</tr>
<tr>
<td>302</td>
<td>Found</td>
<td>临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI</td>
</tr>
<tr>
<td>303</td>
<td>See Other</td>
<td>查看其它地址。与301类似。使用GET和POST请求查看</td>
</tr>
<tr>
<td>304</td>
<td>Not Modified</td>
<td>未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源</td>
</tr>
<tr>
<td>305</td>
<td>Use Proxy</td>
<td>使用代理。所请求的资源必须通过代理访问</td>
</tr>
<tr>
<td>306</td>
<td>Unused</td>
<td>已经被废弃的HTTP状态码</td>
</tr>
<tr>
<td>307</td>
<td>Temporary Redirect</td>
<td>临时重定向。与302类似。使用GET请求重定向</td>
</tr>
<tr>
<td>4开头的状态码</td>
<td></td>
<td></td>
</tr>
<tr>
<td>400</td>
<td>Bad Request</td>
<td>客户端请求的语法错误，服务器无法理解</td>
</tr>
<tr>
<td>401</td>
<td>Unauthorized</td>
<td>请求要求用户的身份认证</td>
</tr>
<tr>
<td>402</td>
<td>Payment Required</td>
<td>保留，将来使用</td>
</tr>
<tr>
<td>403</td>
<td>Forbidden</td>
<td>服务器理解请求客户端的请求，但是拒绝执行此请求</td>
</tr>
<tr>
<td>404</td>
<td>Not Found</td>
<td>服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置”您所请求的资源无法找到”的个性页面</td>
</tr>
<tr>
<td>405</td>
<td>Method Not Allowed</td>
<td>客户端请求中的方法被禁止</td>
</tr>
<tr>
<td>406</td>
<td>Not Acceptable</td>
<td>服务器无法根据客户端请求的内容特性完成请求</td>
</tr>
<tr>
<td>407</td>
<td>Proxy Authentication Required</td>
<td>请求要求代理的身份认证，与401类似，但请求者应当使用代理进行授权</td>
</tr>
<tr>
<td>408</td>
<td>Request Time-out</td>
<td>服务器等待客户端发送的请求时间过长，超时</td>
</tr>
<tr>
<td>409</td>
<td>Conflict</td>
<td>服务器完成客户端的PUT请求是可能返回此代码，服务器处理请求时发生了冲突</td>
</tr>
<tr>
<td>410</td>
<td>Gone</td>
<td>客户端请求的资源已经不存在。410不同于404，如果资源以前有现在被永久删除了可使用410代码，网站设计人员可通过301代码指定资源的新位置</td>
</tr>
<tr>
<td>411</td>
<td>Length Required</td>
<td>服务器无法处理客户端发送的不带Content-Length的请求信息</td>
</tr>
<tr>
<td>412</td>
<td>Precondition Failed</td>
<td>客户端请求信息的先决条件错误</td>
</tr>
<tr>
<td>413</td>
<td>Request Entity Too Large</td>
<td>由于请求的实体过大，服务器无法处理，因此拒绝请求。为防止客户端的连续请求，服务器可能会关闭连接。如果只是服务器暂时无法处理，则会包含一个Retry-After的响应信息</td>
</tr>
<tr>
<td>414</td>
<td>Request-URI Too Large</td>
<td>请求的URI过长（URI通常为网址），服务器无法处理</td>
</tr>
<tr>
<td>415</td>
<td>Unsupported Media Type</td>
<td>服务器无法处理请求附带的媒体格式</td>
</tr>
<tr>
<td>416</td>
<td>Requested range not satisfiable</td>
<td>客户端请求的范围无效</td>
</tr>
<tr>
<td>417</td>
<td>Expectation Failed</td>
<td>服务器无法满足Expect的请求头信息</td>
</tr>
<tr>
<td>5开头的状态码</td>
<td></td>
<td></td>
</tr>
<tr>
<td>500</td>
<td>Internal Server Error</td>
<td>服务器内部错误，无法完成请求</td>
</tr>
<tr>
<td>501</td>
<td>Not Implemented</td>
<td>服务器不支持请求的功能，无法完成请求</td>
</tr>
<tr>
<td>502</td>
<td>Bad Gateway</td>
<td>充当网关或代理的服务器，从远端服务器接收到了一个无效的请求</td>
</tr>
<tr>
<td>503</td>
<td>Service Unavailable</td>
<td>由于超载或系统维护，服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中</td>
</tr>
<tr>
<td>504</td>
<td>Gateway Time-out</td>
<td>充当网关或代理的服务器，未及时从远端服务器获取请求</td>
</tr>
<tr>
<td>505</td>
<td>HTTP Version not supported</td>
<td>服务器不支持请求的HTTP协议的版本，无法完成处理</td>
</tr>
</tbody>
</table>
</div>
<h3 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h3><p>【1】 <a href="http://tools.jb51.net/table/http_status_code">http://tools.jb51.net/table/http_status_code</a></p>
<h2 id="三、HTTP的请求方式有哪几种"><a href="#三、HTTP的请求方式有哪几种" class="headerlink" title="三、HTTP的请求方式有哪几种"></a>三、HTTP的请求方式有哪几种</h2><h3 id="HTTP-Request-Method共计15种"><a href="#HTTP-Request-Method共计15种" class="headerlink" title="HTTP Request Method共计15种"></a>HTTP Request Method共计15种</h3><div class="table-container">
<table>
<thead>
<tr>
<th>序号</th>
<th>方法</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>get</td>
<td>请求指定的页面信息，并返回实体主体。</td>
</tr>
<tr>
<td>2</td>
<td>head</td>
<td>类似于get请求，只不过返回的响应中没有具体的内容，用于获取报头</td>
</tr>
<tr>
<td>3</td>
<td>post</td>
<td>向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。</td>
</tr>
<tr>
<td>4</td>
<td>put</td>
<td>从客户端向服务器传送的数据取代指定的文档的内容。</td>
</tr>
<tr>
<td>5</td>
<td>delete</td>
<td>请求服务器删除指定的页面。</td>
</tr>
<tr>
<td>6</td>
<td>CONNECT</td>
<td>HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。</td>
</tr>
<tr>
<td>7</td>
<td>options</td>
<td>允许客户端查看服务器的性能。</td>
</tr>
<tr>
<td>8</td>
<td>TRACE</td>
<td>回显服务器收到的请求，主要用于测试或诊断。</td>
</tr>
<tr>
<td>9</td>
<td>PATCH</td>
<td>实体中包含一个表，表中说明与该URI所表示的原内容的区别。</td>
</tr>
<tr>
<td>10</td>
<td>MOVE</td>
<td>请求服务器将指定的页面移至另一个网络地址。</td>
</tr>
<tr>
<td>11</td>
<td>COPY</td>
<td>请求服务器将指定的页面拷贝至另一个网络地址。</td>
</tr>
<tr>
<td>12</td>
<td>LINK</td>
<td>请求服务器建立链接关系。</td>
</tr>
<tr>
<td>13</td>
<td>UNLINK</td>
<td>断开链接关系。</td>
</tr>
<tr>
<td>14</td>
<td>WRAPPED</td>
<td>允许客户端发送经过封装的请求。</td>
</tr>
<tr>
<td>15</td>
<td>Extension-mothed</td>
</tr>
</tbody>
</table>
</div>
<p>注：一般情况下使用较多的为：get，post，put，delete，head请求</p>
<h3 id="参考文献-1"><a href="#参考文献-1" class="headerlink" title="参考文献"></a>参考文献</h3><p>【1】 <a href="http://tools.jb51.net/table/http_status_code">http://tools.jb51.net/table/http_status_code</a></p>
<h2 id="四、get请求和post请求的区别"><a href="#四、get请求和post请求的区别" class="headerlink" title="四、get请求和post请求的区别"></a>四、get请求和post请求的区别</h2><h3 id="1、请求头的区别"><a href="#1、请求头的区别" class="headerlink" title="1、请求头的区别"></a>1、请求头的区别</h3><ul>
<li>get：没有请求头</li>
<li>post：有请求头</li>
</ul>
<h3 id="2、请求参数"><a href="#2、请求参数" class="headerlink" title="2、请求参数"></a>2、请求参数</h3><ul>
<li>get：请求参数会显示在URL地址</li>
<li>post：请求参数通过 request body传递参数</li>
</ul>
<h3 id="3、安全性"><a href="#3、安全性" class="headerlink" title="3、安全性"></a>3、安全性</h3><ul>
<li>get：参数暴露在URL地址中，安全性较低。</li>
<li>post：请求参数通过 request body传递，安全性比get高。</li>
</ul>
<h3 id="4、运用场景"><a href="#4、运用场景" class="headerlink" title="4、运用场景"></a>4、运用场景</h3><ul>
<li>get：一般运用列表查询，发送少量数据时候使用</li>
<li>post：一般运用修改 增，修、删除等操作。</li>
</ul>
<h3 id="5、传输大小"><a href="#5、传输大小" class="headerlink" title="5、传输大小"></a>5、传输大小</h3><ul>
<li>get：在HTTP规范中，没有对URL的长度和传输的数据大小进行限制。但是在实际开发过程中，对于GET，特定的浏览器和服务器对URL的长度有限制。因此，在使用GET请求时，传输数据会受到URL长度的限制。</li>
</ul>
<h3 id="6、其他"><a href="#6、其他" class="headerlink" title="6、其他"></a>6、其他</h3><ul>
<li>GET在浏览器回退时是无害的，而POST会再次提交请求。</li>
<li>GET产生的URL地址可以被Bookmark（标签），而POST不可以。</li>
<li>GET请求会被浏览器主动cache（缓存），而POST不会，除非手动设置。</li>
<li>GET请求只能进行url编码，而POST支持多种编码方式</li>
<li>GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。</li>
<li>GET请求在URL中传送的参数是有长度限制的，而POST么有。</li>
<li>对参数的数据类型，GET只接受ASCII字符，而POST没有限制。</li>
<li>GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。</li>
<li>GET参数通过URL传递，POST放在Request body中。</li>
</ul>
<h3 id="参考文献-2"><a href="#参考文献-2" class="headerlink" title="参考文献"></a>参考文献</h3><p>【1】<a href="https://www.cnblogs.com/logsharing/p/8448446.html">https://www.cnblogs.com/logsharing/p/8448446.html</a></p>
<h2 id="五、什么原因引起跨域的问题，如何解决的"><a href="#五、什么原因引起跨域的问题，如何解决的" class="headerlink" title="五、什么原因引起跨域的问题，如何解决的"></a>五、什么原因引起跨域的问题，如何解决的</h2><h3 id="1、产生跨域的原因"><a href="#1、产生跨域的原因" class="headerlink" title="1、产生跨域的原因"></a>1、产生跨域的原因</h3><p>浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是<strong>浏览器施加的</strong>安全限制。</p>
<p><strong>所谓的同源指的是 域名，协议，端口均相同</strong></p>
<ul>
<li>非跨域：<a href="http://www.123.com/index.html">http://www.123.com/index.html</a> 调用 <a href="http://www.123.com/server.php">http://www.123.com/server.php</a></li>
<li>域名不同 跨域：<a href="http://www.123.com/index.html">http://www.123.com/index.html</a> 调用 <a href="http://www.456.com/server.php">http://www.456.com/server.php</a> （主域名不同:123/456，跨域）</li>
<li>子域名不同跨域：<a href="http://abc.123.com/index.html">http://abc.123.com/index.html</a> 调用 <a href="http://def.123.com/server.php">http://def.123.com/server.php</a> （子域名不同:abc/def，跨域）</li>
<li>端口不同跨域：<a href="http://www.123.com:8080/index.html">http://www.123.com:8080/index.html</a> 调用 <a href="http://www.123.com:8081/server.php">http://www.123.com:8081/server.php</a> （端口不同:8080/8081，跨域）</li>
<li>协议不同：<a href="http://www.123.com/index.html">http://www.123.com/index.html</a> 调用 <a href="https://www.123.com/server.php">https://www.123.com/server.php</a> （协议不同:http/https，跨域）</li>
</ul>
<p><strong>注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。</strong></p>
<p>浏览器执行javascript脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行。</p>
<h3 id="2、解决跨域办法"><a href="#2、解决跨域办法" class="headerlink" title="2、解决跨域办法"></a>2、解决跨域办法</h3><p>1、jsonp：</p>
<p>使用方式就不赘述了，但是要注意JSONP只支持GET请求，不支持POST请求。</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">"text/javascript"</span> src=<span class="string">"jquery.js"</span>&gt;<span class="xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span>  </span><br><span class="line">&lt;script type=<span class="string">"text/javascript"</span>&gt;  </span><br><span class="line">    $.ajax({  </span><br><span class="line">        url:<span class="string">"http://crossdomain.com/services.php"</span>,  </span><br><span class="line">        dataType:<span class="string">'jsonp'</span>,  </span><br><span class="line">        data:<span class="string">''</span>,  </span><br><span class="line">        jsonp:<span class="string">'callback'</span>,  </span><br><span class="line">        success:<span class="function"><span class="keyword">function</span>(<span class="params">result</span>) </span>{  </span><br><span class="line">            <span class="keyword">for</span>(<span class="keyword">var</span> i <span class="keyword">in</span> result) {  </span><br><span class="line">                alert(i+<span class="string">":"</span>+result[i]);<span class="comment">//循环输出a:1,b:2,etc.  </span></span><br><span class="line">            }  </span><br><span class="line">        },  </span><br><span class="line">        timeout:<span class="number">3000</span>  </span><br><span class="line">    });  </span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<p>2、vue3 中<code>vue.config.js</code> 文件下 配置 proxyTbale</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">devServer: {</span><br><span class="line">    open: <span class="literal">true</span>, <span class="comment">//是否自动弹出浏览器页面</span></span><br><span class="line">    host: <span class="string">"localhost"</span>, </span><br><span class="line">    port: <span class="string">'8081'</span>,</span><br><span class="line">    https: <span class="literal">false</span>,</span><br><span class="line">    hotOnly: <span class="literal">false</span>, </span><br><span class="line">    proxy: {</span><br><span class="line">        <span class="string">'/api'</span>: {</span><br><span class="line">            target: <span class="string">'https://www.v2ex.com/api'</span>, <span class="comment">//API服务器的地址</span></span><br><span class="line">            changeOrigin: <span class="literal">true</span>, <span class="comment">//是否跨域</span></span><br><span class="line">            pathRewrite: {</span><br><span class="line">                <span class="string">'^/api'</span>: <span class="string">''</span></span><br><span class="line">            }</span><br><span class="line">        }</span><br><span class="line">    },</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<p>3、vue2项目 中config 文件下 index.js 配置跨域</p>
<p><img src="https://img-blog.csdnimg.cn/20190818100903780.png" alt="vue2解决跨域问题"></p>
<h2 id="六、keep-alive运用场景，可通过什么函数来触发-函数。"><a href="#六、keep-alive运用场景，可通过什么函数来触发-函数。" class="headerlink" title="六、keep-alive运用场景，可通过什么函数来触发 函数。"></a>六、keep-alive运用场景，可通过什么函数来触发 函数。</h2><blockquote>
<p>官方文档： <a href="https://cn.vuejs.org/v2/guide/components-dynamic-async.html#在动态组件上使用-keep-alive">https://cn.vuejs.org/v2/guide/components-dynamic-async.html#%E5%9C%A8%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BD%BF%E7%94%A8-keep-alive</a></p>
</blockquote>
<p>keep-alive：当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。一般运用在 tab选项卡切换，每次切换后不需要调用方法后，则可以采用 keep-alive进行存入缓存。</p>
<p><strong>如果在切换页面后，值更改则需要重新调用接口，则可通过<code>activated</code> 和 <code>deactivated</code> 将会在 <code>&lt;keep-alive/&gt;</code> 树内的所有嵌套组件中触发 函数。</strong></p>
<p>官方说明：</p>
<p>注意这个 <code>&lt;keep-alive/&gt;</code>要求被切换到的组件都有自己的名字，不论是通过组件的 <code>name</code> 选项还是局部/全局注册。</p>
<ul>
<li><p><strong>Props</strong>：</p>
<ul>
<li><code>include</code> - 字符串或正则表达式。只有名称匹配的组件会被缓存。</li>
<li><code>exclude</code> - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。</li>
<li><code>max</code> - 数字。最多可以缓存多少组件实例。</li>
</ul>
</li>
<li><p><strong>用法</strong>：</p>
<p><code>&lt;keep-alive/&gt;</code>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和  <code>&lt;transition/&gt;</code>相似，<code>&lt;keep-alive&gt;</code>是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。</p>
<p><strong>当组件在 <code>&lt;keep-alive&gt;</code>内被切换，它的 <code>activated</code> 和 <code>deactivated</code> 这两个生命周期钩子函数将会被对应执行。</strong></p>
<blockquote>
<p><strong>在 2.2.0 及其更高版本中，<code>activated</code> 和 <code>deactivated</code> 将会在 <code>&lt;keep-alive/&gt;</code> 树内的所有嵌套组件中触发。</strong></p>
</blockquote>
<p>主要用于保留组件状态或避免重新渲染。</p>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 基本 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">keep-alive</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">component</span> <span class="attr">:is</span>=<span class="string">"view"</span>&gt;</span><span class="tag">&lt;/<span class="name">component</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">keep-alive</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 多个条件判断的子组件 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">keep-alive</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">comp-a</span> <span class="attr">v-if</span>=<span class="string">"a &gt; 1"</span>&gt;</span><span class="tag">&lt;/<span class="name">comp-a</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">comp-b</span> <span class="attr">v-else</span>&gt;</span><span class="tag">&lt;/<span class="name">comp-b</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">keep-alive</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 和 `&lt;transition&gt;` 一起使用 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">transition</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">keep-alive</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">component</span> <span class="attr">:is</span>=<span class="string">"view"</span>&gt;</span><span class="tag">&lt;/<span class="name">component</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">keep-alive</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<p>注意，<code>是用在其一个直属的子组件被开关的情形。如果你在其中有 `v-for` 则不会工作。如果有上述的多个条件性的子元素，</code> 要求同时只有一个子元素被渲染。</p>
</li>
<li><p><strong><code>include</code> and <code>exclude</code></strong></p>
<blockquote>
<p>2.1.0 新增</p>
</blockquote>
<p><code>include</code> 和 <code>exclude</code> 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示：</p>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 逗号分隔字符串 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">keep-alive</span> <span class="attr">include</span>=<span class="string">"a,b"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">component</span> <span class="attr">:is</span>=<span class="string">"view"</span>&gt;</span><span class="tag">&lt;/<span class="name">component</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">keep-alive</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 正则表达式 (使用 `v-bind`) --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">keep-alive</span> <span class="attr">:include</span>=<span class="string">"/a|b/"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">component</span> <span class="attr">:is</span>=<span class="string">"view"</span>&gt;</span><span class="tag">&lt;/<span class="name">component</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">keep-alive</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 数组 (使用 `v-bind`) --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">keep-alive</span> <span class="attr">:include</span>=<span class="string">"['a', 'b']"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">component</span> <span class="attr">:is</span>=<span class="string">"view"</span>&gt;</span><span class="tag">&lt;/<span class="name">component</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">keep-alive</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<p>匹配首先检查组件自身的 <code>name</code> 选项，如果 <code>name</code> 选项不可用，则匹配它的局部注册名称 (父组件 <code>components</code> 选项的键值)。匿名组件不能被匹配。</p>
</li>
<li><p><strong><code>max</code></strong></p>
<blockquote>
<p>2.5.0 新增</p>
</blockquote>
<p>最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。</p>
<figure class="highlight plain"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;keep-alive :max="10"&gt;</span><br><span class="line">  &lt;component :is="view"&gt;&lt;/component&gt;</span><br><span class="line">&lt;/keep-alive&gt;</span><br></pre></td></tr></tbody></table></figure>
<p><code>&lt;keep-alive&gt;</code> 不会在函数式组件中正常工作，因为它们没有缓存实例。</p>
</li>
<li><p><strong>参考</strong>：<a href="https://cn.vuejs.org/v2/guide/components-dynamic-async.html#在动态组件上使用-keep-alive">动态组件 - keep-alive</a></p>
</li>
</ul>
<h2 id="七、vuex-中的-store-和-store-的区别"><a href="#七、vuex-中的-store-和-store-的区别" class="headerlink" title="七、vuex 中的 store 和 $store 的区别"></a>七、vuex 中的 store 和 $store 的区别</h2><figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/login"</span>&gt;</span>{{ $store.state.userName }}<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/login"</span>&gt;</span>{{ store.state.userName }}<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/login"</span>&gt;</span>{{ this.store.state.userName }}<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/login"</span>&gt;</span>{{ this.$store.state.userName }}<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<p><code>$store</code> 是挂载在 Vue 实例上的（即Vue.prototype），而组件也其实是一个Vue实例，在组件中可使用 <code>this</code> 访问原型上的属性，template 拥有组件实例的上下文，可直接通过 <code></code> 访问，等价于 script 中的 <code>this.$store.state.userName</code>。<br>至于 <code></code>，script 中的 <code>data</code> 需声明过 <code>store</code> 才可访问。</p>
<h3 id="参考文献-3"><a href="#参考文献-3" class="headerlink" title="参考文献"></a>参考文献</h3><p>【1】 <a href="https://blog.csdn.net/zeroyulong/article/details/83750708">https://blog.csdn.net/zeroyulong/article/details/83750708</a></p>
<h2 id="八、父子组件、兄弟组件之间的传值方式"><a href="#八、父子组件、兄弟组件之间的传值方式" class="headerlink" title="八、父子组件、兄弟组件之间的传值方式"></a>八、父子组件、兄弟组件之间的传值方式</h2><ul>
<li>父组件可以使用 props 把数据传给子组件。</li>
<li>子组件可以使用 $emit 触发父组件的自定义事件。</li>
<li>兄弟组件之间的传值：需新建一个中间组件，然后通过 $emit()来传递参数（类似与子组件给父组件之间的传值方式），然后通过$on(functionName, callback)监听 兄弟组件 暴露出来的事件，通过回调函数获取兄弟组件传递出来的值</li>
</ul>
<h3 id="1、父组件给子组件传值，关键字：props"><a href="#1、父组件给子组件传值，关键字：props" class="headerlink" title="1、父组件给子组件传值，关键字：props"></a>1、父组件给子组件传值，关键字：props</h3><p>父组件：</p>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>父组件<span class="tag">&lt;/<span class="name">h1</span>&gt;</span>　　<span class="comment">&lt;!-- 引入子组件 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">child</span> <span class="attr">:sendMsg</span>=<span class="string">"fatherMsg"</span>&gt;</span><span class="tag">&lt;/<span class="name">child</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="keyword">import</span> child <span class="keyword">from</span> <span class="string">'@/components/child'</span></span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> {</span></span><br><span class="line"><span class="actionscript">  name: <span class="string">'father'</span>,</span></span><br><span class="line">  components: {</span><br><span class="line">    child</span><br><span class="line">  },</span><br><span class="line">  data() {</span><br><span class="line"><span class="actionscript">    <span class="keyword">return</span> {</span></span><br><span class="line"><span class="actionscript">      fatherMsg: <span class="string">'嗨，儿子'</span> <span class="comment">// 传递给子组件的值</span></span></span><br><span class="line">    }</span><br><span class="line">  }</span><br><span class="line">}</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<p>子组件：通过props拿到父组件传递过来的值</p>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>子组件<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>获取父组件传值:{{sendMsg}}<span class="tag">&lt;/<span class="name">span</span>&gt;</span> </span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> {</span></span><br><span class="line"><span class="actionscript">  name: <span class="string">'child'</span>,</span></span><br><span class="line">  data() {</span><br><span class="line"><span class="actionscript">    <span class="keyword">return</span> {</span></span><br><span class="line"></span><br><span class="line">    }</span><br><span class="line">  },</span><br><span class="line"><span class="actionscript">  props: [<span class="string">'sendMsg'</span>] <span class="comment">// 拿到父组件绑定到sendMsg的值，然后在子组件下显示出来</span></span></span><br><span class="line">}</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<h3 id="2、子组件给父组件传值：通过触发事件传递值"><a href="#2、子组件给父组件传值：通过触发事件传递值" class="headerlink" title="2、子组件给父组件传值：通过触发事件传递值"></a>2、子组件给父组件传值：通过触发事件传递值</h3><p>子组件：</p>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>子组件<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>获取父组件传值:{{sendMsg}}<span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;<span class="name">hr</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"sendToFather"</span>&gt;</span>子组件给父组件传值<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> {</span></span><br><span class="line"><span class="actionscript">  name: <span class="string">'child'</span>,</span></span><br><span class="line">  data() {</span><br><span class="line"><span class="actionscript">    <span class="keyword">return</span> {</span></span><br><span class="line"><span class="actionscript">      childMsg: <span class="string">'这是来自子组件的数据'</span></span></span><br><span class="line">    }</span><br><span class="line">  },</span><br><span class="line"><span class="actionscript">  props: [<span class="string">'sendMsg'</span>],</span></span><br><span class="line">  methods: {</span><br><span class="line"><span class="actionscript">    sendToFather: <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{</span></span><br><span class="line"><span class="actionscript">      <span class="keyword">this</span>.$emit(<span class="string">'getChildValue'</span>, <span class="keyword">this</span>.childMsg); <span class="comment">// 参数1 getChildValue作为中间状态，参数2 this.childMsg即为传递给父组件的数据</span></span></span><br><span class="line">    }</span><br><span class="line">  }</span><br><span class="line">}</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<p>父组件：</p>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>父组件<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 引入子组件 定义一个on的方法监听子组件的状态，然后通过getChild方法获取子组件传递的数据--&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">child</span> <span class="attr">:sendMsg</span>=<span class="string">"fatherMsg"</span> <span class="attr">v-on:getChildValue</span>=<span class="string">"getChild"</span>&gt;</span><span class="tag">&lt;/<span class="name">child</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>这是来自子组件的数据：{{childValue}}<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="keyword">import</span> child <span class="keyword">from</span> <span class="string">'@/components/child'</span></span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> {</span></span><br><span class="line"><span class="actionscript">  name: <span class="string">'father'</span>,</span></span><br><span class="line">  components: {</span><br><span class="line">    child</span><br><span class="line">  },</span><br><span class="line">  data() {</span><br><span class="line"><span class="actionscript">    <span class="keyword">return</span> {</span></span><br><span class="line"><span class="actionscript">      fatherMsg: <span class="string">'嗨，儿子'</span>,</span></span><br><span class="line"><span class="actionscript">      childValue: <span class="string">''</span></span></span><br><span class="line">    }</span><br><span class="line">  },</span><br><span class="line">  methods: {</span><br><span class="line"><span class="actionscript">    getChild: <span class="function"><span class="keyword">function</span><span class="params">(data)</span> </span>{ <span class="comment">// 此时的参数data为子组件传递的值，即this.$emit()的第二个参数</span></span></span><br><span class="line"><span class="actionscript">      <span class="keyword">this</span>.childValue = data;</span></span><br><span class="line">    }</span><br><span class="line">  }</span><br><span class="line">}</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<h3 id="3、同级组件传递数据（兄弟组件）"><a href="#3、同级组件传递数据（兄弟组件）" class="headerlink" title="3、同级组件传递数据（兄弟组件）"></a>3、同级组件传递数据（兄弟组件）</h3><p>对于同级组件传值用的较多的情况，推荐直接使用vuex进行状态管理会比较方便。</p>
<p>其原理是先建立一个中间事件 center.js，放在tools文件夹下，如下：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'vue'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">new</span> Vue()</span><br></pre></td></tr></tbody></table></figure>
<p>center.js中我们只创建了一个新的Vue实例，以后它就承担起了组件之间通信的桥梁了，也就是中央事件总线</p>
<p>然后创建第一个子组件first.vue：</p>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"first-vue-box"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>this is firstChild vue<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"sendMsg"</span>&gt;</span>发送<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="keyword">import</span> bridge <span class="keyword">from</span> <span class="string">'../tools/center'</span></span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> {</span></span><br><span class="line">  data () {</span><br><span class="line"><span class="actionscript">    <span class="keyword">return</span> {}</span></span><br><span class="line">  },</span><br><span class="line">  methods: {</span><br><span class="line">    sendMsg () {</span><br><span class="line"><span class="actionscript">      bridge.$emit(<span class="string">'firstChildMsg'</span>, <span class="string">'this is firstChild Msg'</span>)</span></span><br><span class="line">    }</span><br><span class="line">  }</span><br><span class="line">}</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">lang</span>=<span class="string">"scss"</span> <span class="attr">scoped</span>&gt;</span></span><br><span class="line"><span class="css"><span class="selector-class">.first-vue-box</span> {</span></span><br><span class="line">  border: 1px solid blue;</span><br><span class="line">}</span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<p>这里先引入事件总线，通过事件总线点击按钮后将first.vue的信息通过事件firstChildMsg的形式发布出去了（我个人的理解是相当于通过事件总线，将first.vue的firstChildMsg这个事件暴露出去），用法跟子组件向父组件传参的模式一样</p>
<p>然后再创建第二个组件second.vue：</p>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"second-child"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h4</span>&gt;</span>this is second child vue<span class="tag">&lt;/<span class="name">h4</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>从first.vue获取同级组件传递过来的信息：{{message}}<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="keyword">import</span> bridge <span class="keyword">from</span> <span class="string">'../tools/center'</span></span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> {</span></span><br><span class="line">  data () {</span><br><span class="line"><span class="actionscript">    <span class="keyword">return</span> {</span></span><br><span class="line"><span class="actionscript">      message: <span class="string">'默认值'</span></span></span><br><span class="line">    }</span><br><span class="line">  },</span><br><span class="line">  mounted () {</span><br><span class="line"><span class="javascript">    <span class="keyword">let</span> _this = <span class="keyword">this</span></span></span><br><span class="line"><span class="actionscript">    bridge.$on(<span class="string">'firstChildMsg'</span>, <span class="function"><span class="keyword">function</span> <span class="params">(msg)</span> </span>{</span></span><br><span class="line">      _this.message = msg</span><br><span class="line">    })</span><br><span class="line">  }</span><br><span class="line">}</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<p>在second.vue中再引入事件总线，然后通过$on(functionName, callback)监听first.vue暴露出来的firstChildMsg事件，通过回调函数获取first.vue传递出来的值</p>
<p>引入两个子组件：</p>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"detail-div"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h3</span>&gt;</span>首页详情<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">first-child</span>&gt;</span><span class="tag">&lt;/<span class="name">first-child</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">second-child</span>&gt;</span><span class="tag">&lt;/<span class="name">second-child</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="keyword">import</span> firstChild <span class="keyword">from</span> <span class="string">'./first'</span></span></span><br><span class="line"><span class="javascript"><span class="keyword">import</span> secondChild <span class="keyword">from</span> <span class="string">'./second'</span></span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> {</span></span><br><span class="line">  data () {</span><br><span class="line"><span class="actionscript">    <span class="keyword">return</span> {}</span></span><br><span class="line">  },</span><br><span class="line">  components: {</span><br><span class="line">    firstChild,</span><br><span class="line">    secondChild</span><br><span class="line">  },</span><br><span class="line">  mounted () {</span><br><span class="line"><span class="actionscript">    <span class="comment">// console.log('详情页面...')</span></span></span><br><span class="line">  }</span><br><span class="line">}</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<h3 id="参考文献-4"><a href="#参考文献-4" class="headerlink" title="参考文献"></a>参考文献</h3><p>【1】：<a href="https://www.cnblogs.com/secretAngel/p/9705809.html">https://www.cnblogs.com/secretAngel/p/9705809.html</a></p>
<h2 id="九、js-中-与-的区别？"><a href="#九、js-中-与-的区别？" class="headerlink" title="九、js 中 == 与 === 的区别？"></a>九、js 中 == 与 === 的区别？</h2><ul>
<li>== 表示相等 （值相等）</li>
<li>===表示恒等（类型和值都要相等）</li>
</ul>
<p><strong>js在比较的时候如果是 == 会先做类型转换，再判断值得大小，如果是===类型和值必须都相等。</strong></p>
<p><img src="https://img-blog.csdnimg.cn/20190710234842736.png" alt="代码"></p>
<p><img src="https://img-blog.csdnimg.cn/20190710234853128.png" alt="结果"></p>
<h2 id="十、webpack打包过程"><a href="#十、webpack打包过程" class="headerlink" title="十、webpack打包过程"></a>十、webpack打包过程</h2><h2 id="十一、-1-undefined-？，1-null-？"><a href="#十一、-1-undefined-？，1-null-？" class="headerlink" title="十一、 1+undefined = ？，1+null = ？"></a>十一、 1+undefined = ？，1+null = ？</h2><blockquote>
<p>啥都不说，直接贴代码，来的实际</p>
</blockquote>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line"> <span class="keyword">let</span> a = <span class="number">1</span>; </span><br><span class="line">  <span class="keyword">let</span> a1 = <span class="string">"1"</span>;</span><br><span class="line">  <span class="keyword">let</span> a2 = [<span class="number">1</span>]; </span><br><span class="line">  <span class="keyword">let</span> a3 = {<span class="attr">a</span>: <span class="number">1</span>}; </span><br><span class="line">  <span class="keyword">let</span> b = <span class="literal">undefined</span>;</span><br><span class="line">  <span class="keyword">let</span> c = <span class="literal">null</span>;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">"----------以下的 1 是number类型：-------------"</span>)</span><br><span class="line">  <span class="built_in">console</span>.log( a + <span class="literal">undefined</span>)</span><br><span class="line">  <span class="built_in">console</span>.log( a + <span class="literal">null</span>)</span><br><span class="line">  <span class="built_in">console</span>.log( a + b)</span><br><span class="line">  <span class="built_in">console</span>.log( a + c)</span><br><span class="line"></span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">"----------以下的 1 是字符串类型：-------------"</span>)</span><br><span class="line">  <span class="built_in">console</span>.log( a1 + <span class="literal">undefined</span>)</span><br><span class="line">  <span class="built_in">console</span>.log( a1 + <span class="literal">null</span>)</span><br><span class="line">  <span class="built_in">console</span>.log( a1 + b)</span><br><span class="line">  <span class="built_in">console</span>.log( a1 + c)</span><br><span class="line"></span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">"----------以下的 1 是数组类型：-------------"</span>)</span><br><span class="line">  <span class="built_in">console</span>.log( a2 + <span class="literal">undefined</span>)</span><br><span class="line">  <span class="built_in">console</span>.log( a2 + <span class="literal">null</span>)</span><br><span class="line">  <span class="built_in">console</span>.log( a2 + b)</span><br><span class="line">  <span class="built_in">console</span>.log( a2 + c)</span><br><span class="line"></span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">"----------以下的 1 是object类型：-------------"</span>)</span><br><span class="line">  <span class="built_in">console</span>.log( a3 + <span class="literal">undefined</span>)</span><br><span class="line">  <span class="built_in">console</span>.log( a3 + <span class="literal">null</span>)</span><br><span class="line">  <span class="built_in">console</span>.log( a3 + b)</span><br><span class="line">  <span class="built_in">console</span>.log( a3 + c)</span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<p>结果集：</p>
<p><img src="https://cdn.jsdelivr.net/gh/foxhuli229/blog-imgs/images/1+undefined与1+null结果-2.png" alt="1+undefined与1+null结果"></p>
<p><img src="https://user-gold-cdn.xitu.io/2018/12/19/167c4a2627fe55f1?imageslim" alt="== 与 === 的区别"></p>
<h2 id="十二、es6中模板字符串一共有几种用法，分别是？"><a href="#十二、es6中模板字符串一共有几种用法，分别是？" class="headerlink" title="十二、es6中模板字符串一共有几种用法，分别是？"></a>十二、es6中模板字符串一共有几种用法，分别是？</h2><blockquote>
<p>推荐一本es6语法极好电子书籍 <a href="https://es6.ruanyifeng.com/#docs/let">阮一峰 - ECMAScript 6 入门</a> </p>
</blockquote>
<script>
        document.querySelectorAll('.github-emoji')
          .forEach(el => {
            if (!el.dataset.src) { return; }
            const img = document.createElement('img');
            img.style = 'display:none !important;';
            img.src = el.dataset.src;
            img.addEventListener('error', () => {
              img.remove();
              el.style.color = 'inherit';
              el.style.backgroundImage = 'none';
              el.style.background = 'none';
            });
            img.addEventListener('load', () => {
              img.remove();
            });
            document.body.appendChild(img);
          });
      </script>
        </div>
        
        <div class="level is-size-7 is-uppercase">
            <div class="level-start">
                <div class="level-item">
                    <span class="is-size-6 has-text-grey has-mr-7">#</span>
                    <a class="has-link-grey -link" href="/tags/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/" rel="tag">前端面试</a>
                </div>
            </div>
        </div>
        
        
        
        <div class="social-share"></div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share.js@1.0.16/dist/css/share.min.css">
<script src="https://cdn.jsdelivr.net/npm/social-share.js@1.0.16/dist/js/social-share.min.js"></script>
        
    </div>
</div>



<div class="card">
    <div class="card-content">
        <h3 class="menu-label has-text-centered">喜欢这篇文章？打赏一下作者吧</h3>
        <div class="buttons is-centered">
            
                
<a class="button is-info donate">
    <span class="icon is-small">
        <i class="fab fa-alipay"></i>
    </span>
    <span>支付宝</span>
    <div class="qrcode"><img src="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.1/images/zalipay.jpg" alt="支付宝"></div>
</a>

                
                
<a class="button is-success donate">
    <span class="icon is-small">
        <i class="fab fa-weixin"></i>
    </span>
    <span>微信</span>
    <div class="qrcode"><img src="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.1/images/zweixinplay.jpg" alt="微信"></div>
</a>

                
        </div>
    </div>
</div>



<div class="card card-transparent">
    <div class="level post-navigation is-flex-wrap is-mobile">
        
        <div class="level-start">
            <a class="level level-item has-link-grey  article-nav-prev" href="/posts/9406.html">
                <i class="level-item fas fa-chevron-left"></i>
                <span class="level-item">初级前端面试总结-2</span>
            </a>
        </div>
        
        
        <div class="level-end">
            <a class="level level-item has-link-grey  article-nav-next" href="/posts/9d21.html">
                <span class="level-item">cookie与webStorage的区别</span>
                <i class="level-item fas fa-chevron-right"></i>
            </a>
        </div>
        
    </div>
</div>



<div class="card">
    <div class="card-content">
        <h3 class="title is-5 has-text-weight-normal">评论</h3>
        
<div id="valine-thread" class="content"></div>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/valine@1.3.10/dist/Valine.min.js"></script>
<script>
    new Valine({
        el: '#valine-thread' ,
        notify: false,
        verify: true,
        app_id: 'LliwJqiOd8MS79CDFo9tGFEX-gzGzoHsz',
        app_key: '05cdCDsmfHxxo8UIOvcDFaq5',
        placeholder: 'just go go'
    });
</script>

    </div>
</div>
</div>
                
    

    

    

    


    <div class="column 11 is-4-tablet is-4-desktop is-3-widescreen  has-order-1 column-left ">
        
        
<!-- 个人资料 -->
<div class="card widget">
    <div class="card-content">
        <nav class="level">
            <div class="level-item has-text-centered" style="flex-shrink: 1">
                <div>
                    
                    
                    <figure class="image is-128x128 has-mb-6">
                        <img class="is-rounded" src="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.4/images/z_avater.png"
                            alt="Fox"
                            style="">
                    </figure>
                    
                    <p class="is-size-4 is-block">
                        Fox
                    </p>
                    
                    
                    
                    <p class="is-size-6 is-flex is-flex-center has-text-grey">
                        <i class="fas fa-map-marker-alt has-mr-7"></i>
                        <span>chengdu - china</span>
                    </p>
                    
                </div>
            </div>
        </nav>
        <nav class="level is-mobile">
            <div class="level-item has-text-centered is-marginless">
                <div>
                    <p class="heading">
                        文章
                    </p>
                    <a href="/archives">
                        <p class="title has-text-weight-normal">
                            17
                        </p>
                    </a>
                </div>
            </div>
            <div class="level-item has-text-centered is-marginless">
                <div>
                    <p class="heading">
                        分类
                    </p>
                    <a href="/categories">
                        <p class="title has-text-weight-normal">
                            5
                        </p>
                    </a>
                </div>
            </div>
            <div class="level-item has-text-centered is-marginless">
                <div>
                    <p class="heading">
                        标签
                    </p>
                    <a href="/tags">
                        <p class="title has-text-weight-normal">
                            13
                        </p>
                    </a>
                </div>
            </div>
        </nav>
        
        <div class="level">
            <a class="level-item button is-link is-rounded" href="https://github.com/foxhuli229" target="_blank"
                rel="noopener">
                关注我</a>
        </div>
        
        
        
        <div class="level is-mobile">
            
            <a class="level-item button is-white is-marginless" target="_blank" rel="noopener" title="Github"
                href="https://github.com/foxhuli229">
                
                <i class="fab fa-github"></i>
                
            </a>
            
            <a class="level-item button is-white is-marginless" target="_blank" rel="noopener" title="Facebook"
                href="https://facebook.com">
                
                <i class="fab fa-facebook"></i>
                
            </a>
            
            <a class="level-item button is-white is-marginless" target="_blank" rel="noopener" title="Twitter"
                href="https://twitter.com">
                
                <i class="fab fa-twitter"></i>
                
            </a>
            
            <a class="level-item button is-white is-marginless" target="_blank" rel="noopener" title="Dribbble"
                href="https://dribbble.com">
                
                <i class="fab fa-dribbble"></i>
                
            </a>
            
            <a class="level-item button is-white is-marginless" target="_blank" rel="noopener" title="RSS"
                href="/">
                
                <i class="fas fa-rss"></i>
                
            </a>
            
        </div>
        
    </div>
</div>
        
        
<div class="card widget">
    <div class="card-content">
        <div class="menu">
            <h3 class="menu-label">
                分类
            </h3>
            <ul class="menu-list">
            <li>
        <a class="level is-marginless" href="/categories/hexo/">
            <span class="level-start">
                <span class="level-item">hexo</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">1</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/categories/vue/">
            <span class="level-start">
                <span class="level-item">vue</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">3</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/categories/%E5%89%8D%E7%AB%AF/">
            <span class="level-start">
                <span class="level-item">前端</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">12</span>
            </span>
        </a><ul><li>
        <a class="level is-marginless" href="/categories/%E5%89%8D%E7%AB%AF/vue/">
            <span class="level-start">
                <span class="level-item">vue</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">1</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/categories/%E5%89%8D%E7%AB%AF/%E9%9D%A2%E8%AF%95/">
            <span class="level-start">
                <span class="level-item">面试</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">4</span>
            </span>
        </a></li></ul></li>
            </ul>
        </div>
    </div>
</div>
        
        <div class="card widget">
    <div class="card-content">
        <div class="menu">
            <h3 class="menu-label">
                标签
            </h3>
            <div class="field is-grouped is-grouped-multiline">
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/JavaScript/">
                        <span class="tag">JavaScript</span>
                        <span class="tag is-grey">5</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/SVG/">
                        <span class="tag">SVG</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/cookie-%E4%B8%8E-webstorage%E7%9A%84%E5%8C%BA%E5%88%AB/">
                        <span class="tag">cookie 与 webstorage的区别</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/hexo/">
                        <span class="tag">hexo</span>
                        <span class="tag is-grey">2</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/hexo-theme-matery/">
                        <span class="tag">hexo-theme-matery</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/lightgallery-js/">
                        <span class="tag">lightgallery.js</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/vue/">
                        <span class="tag">vue</span>
                        <span class="tag is-grey">2</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/vue-admin-template/">
                        <span class="tag">vue-admin-template</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/vue%E5%BC%82%E6%AD%A5%E5%8A%A0%E8%BD%BD%E6%A8%A1%E5%9D%97/">
                        <span class="tag">vue异步加载模块</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/vue%E7%BB%84%E4%BB%B6/">
                        <span class="tag">vue组件</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/">
                        <span class="tag">前端面试</span>
                        <span class="tag is-grey">3</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/%E5%8E%BB%E5%93%AA%E5%84%BF%E7%BD%91/">
                        <span class="tag">去哪儿网</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/%E6%95%B0%E7%BB%84/">
                        <span class="tag">数组</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
            </div>
        </div>
    </div>
</div>
        
        
        <div class="column-right-shadow is-hidden-widescreen ">
            
            <!-- 个人信息-目录 -->


    <div class="card widget" id="toc">
        <div class="card-content">
            <div class="menu">
                <h3 class="menu-label">
                    目录
                </h3>
                <ul class="menu-list"><li>
        <a class="is-flex" href="#一、cookie、sessionStorage和localStorage的区别">
        <span class="has-mr-6">1</span>
        <span>一、cookie、sessionStorage和localStorage的区别</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#1、存储大小">
        <span class="has-mr-6">1.1</span>
        <span>1、存储大小</span>
        </a></li><li>
        <a class="is-flex" href="#2、有效期">
        <span class="has-mr-6">1.2</span>
        <span>2、有效期</span>
        </a></li><li>
        <a class="is-flex" href="#3、运用场景">
        <span class="has-mr-6">1.3</span>
        <span>3、运用场景</span>
        </a></li><li>
        <a class="is-flex" href="#4、安全性、服务端通信">
        <span class="has-mr-6">1.4</span>
        <span>4、安全性、服务端通信</span>
        </a></li><li>
        <a class="is-flex" href="#5、作用域">
        <span class="has-mr-6">1.5</span>
        <span>5、作用域</span>
        </a></li><li>
        <a class="is-flex" href="#6、存储位置">
        <span class="has-mr-6">1.6</span>
        <span>6、存储位置</span>
        </a></li><li>
        <a class="is-flex" href="#7、机制不同">
        <span class="has-mr-6">1.7</span>
        <span>7、机制不同</span>
        </a></li><li>
        <a class="is-flex" href="#8、参考文献">
        <span class="has-mr-6">1.8</span>
        <span>8、参考文献</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#二、HTTP状态码">
        <span class="has-mr-6">2</span>
        <span>二、HTTP状态码</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#HTTP状态码表（版本1）-此表含状态码英文名称">
        <span class="has-mr-6">2.1</span>
        <span>HTTP状态码表（版本1） 此表含状态码英文名称</span>
        </a></li><li>
        <a class="is-flex" href="#参考文献">
        <span class="has-mr-6">2.2</span>
        <span>参考文献</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#三、HTTP的请求方式有哪几种">
        <span class="has-mr-6">3</span>
        <span>三、HTTP的请求方式有哪几种</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#HTTP-Request-Method共计15种">
        <span class="has-mr-6">3.1</span>
        <span>HTTP Request Method共计15种</span>
        </a></li><li>
        <a class="is-flex" href="#参考文献-1">
        <span class="has-mr-6">3.2</span>
        <span>参考文献</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#四、get请求和post请求的区别">
        <span class="has-mr-6">4</span>
        <span>四、get请求和post请求的区别</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#1、请求头的区别">
        <span class="has-mr-6">4.1</span>
        <span>1、请求头的区别</span>
        </a></li><li>
        <a class="is-flex" href="#2、请求参数">
        <span class="has-mr-6">4.2</span>
        <span>2、请求参数</span>
        </a></li><li>
        <a class="is-flex" href="#3、安全性">
        <span class="has-mr-6">4.3</span>
        <span>3、安全性</span>
        </a></li><li>
        <a class="is-flex" href="#4、运用场景">
        <span class="has-mr-6">4.4</span>
        <span>4、运用场景</span>
        </a></li><li>
        <a class="is-flex" href="#5、传输大小">
        <span class="has-mr-6">4.5</span>
        <span>5、传输大小</span>
        </a></li><li>
        <a class="is-flex" href="#6、其他">
        <span class="has-mr-6">4.6</span>
        <span>6、其他</span>
        </a></li><li>
        <a class="is-flex" href="#参考文献-2">
        <span class="has-mr-6">4.7</span>
        <span>参考文献</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#五、什么原因引起跨域的问题，如何解决的">
        <span class="has-mr-6">5</span>
        <span>五、什么原因引起跨域的问题，如何解决的</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#1、产生跨域的原因">
        <span class="has-mr-6">5.1</span>
        <span>1、产生跨域的原因</span>
        </a></li><li>
        <a class="is-flex" href="#2、解决跨域办法">
        <span class="has-mr-6">5.2</span>
        <span>2、解决跨域办法</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#六、keep-alive运用场景，可通过什么函数来触发-函数。">
        <span class="has-mr-6">6</span>
        <span>六、keep-alive运用场景，可通过什么函数来触发 函数。</span>
        </a></li><li>
        <a class="is-flex" href="#七、vuex-中的-store-和-store-的区别">
        <span class="has-mr-6">7</span>
        <span>七、vuex 中的 store 和 $store 的区别</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#参考文献-3">
        <span class="has-mr-6">7.1</span>
        <span>参考文献</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#八、父子组件、兄弟组件之间的传值方式">
        <span class="has-mr-6">8</span>
        <span>八、父子组件、兄弟组件之间的传值方式</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#1、父组件给子组件传值，关键字：props">
        <span class="has-mr-6">8.1</span>
        <span>1、父组件给子组件传值，关键字：props</span>
        </a></li><li>
        <a class="is-flex" href="#2、子组件给父组件传值：通过触发事件传递值">
        <span class="has-mr-6">8.2</span>
        <span>2、子组件给父组件传值：通过触发事件传递值</span>
        </a></li><li>
        <a class="is-flex" href="#3、同级组件传递数据（兄弟组件）">
        <span class="has-mr-6">8.3</span>
        <span>3、同级组件传递数据（兄弟组件）</span>
        </a></li><li>
        <a class="is-flex" href="#参考文献-4">
        <span class="has-mr-6">8.4</span>
        <span>参考文献</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#九、js-中-与-的区别？">
        <span class="has-mr-6">9</span>
        <span>九、js 中 == 与 === 的区别？</span>
        </a></li><li>
        <a class="is-flex" href="#十、webpack打包过程">
        <span class="has-mr-6">10</span>
        <span>十、webpack打包过程</span>
        </a></li><li>
        <a class="is-flex" href="#十一、-1-undefined-？，1-null-？">
        <span class="has-mr-6">11</span>
        <span>十一、 1+undefined = ？，1+null = ？</span>
        </a></li><li>
        <a class="is-flex" href="#十二、es6中模板字符串一共有几种用法，分别是？">
        <span class="has-mr-6">12</span>
        <span>十二、es6中模板字符串一共有几种用法，分别是？</span>
        </a></li></ul>
            </div>
        </div>
    </div>

            
            <!-- 最近/最新的文章 -->
<div class="card widget">
    <div class="card-content">
        <h3 class="menu-label">
            最新文章
        </h3>
        
        <article class="media">
            
            <a href="/posts/7358.html" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="https://cn.vuejs.org/images/logo.png" alt="component组件嵌套，导致页面重复渲染，重复请求的bug">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-05-23T02:18:20.000Z">2020-05-23</time></div>
                    <a href="/posts/7358.html" class="title has-link-black-ter is-size-6 has-text-weight-normal">component组件嵌套，导致页面重复渲染，重复请求的bug</a>
                    <p class="is-size-7 is-uppercase">
                        <a class="has-link-grey -link" href="/categories/vue/">vue</a>
                    </p>
                </div>
            </div>
        </article>
        
        <article class="media">
            
            <a href="/posts/2b18.html" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="https://cn.vuejs.org/images/logo.png" alt="vue异步加载模块">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-05-22T23:18:18.000Z">2020-05-23</time></div>
                    <a href="/posts/2b18.html" class="title has-link-black-ter is-size-6 has-text-weight-normal">vue异步加载模块</a>
                    <p class="is-size-7 is-uppercase">
                        <a class="has-link-grey -link" href="/categories/vue/">vue</a>
                    </p>
                </div>
            </div>
        </article>
        
        <article class="media">
            
            <a href="/posts/54f1.html" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="https://panjiachen.gitee.io/vue-element-admin-site/home.png" alt="vue-admin-template模板添加tagsview">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-05-02T16:22:02.000Z">2020-05-03</time></div>
                    <a href="/posts/54f1.html" class="title has-link-black-ter is-size-6 has-text-weight-normal">vue-admin-template模板添加tagsview</a>
                    <p class="is-size-7 is-uppercase">
                        <a class="has-link-grey -link" href="/categories/vue/">vue</a>
                    </p>
                </div>
            </div>
        </article>
        
        <article class="media">
            
            <a href="/posts/1d48.html" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1051132835,1344326547&amp;fm=26&amp;gp=0.jpg" alt="关于 hexo 对文章渲染 {{ }} 解析的问题">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-05-02T09:40:49.000Z">2020-05-02</time></div>
                    <a href="/posts/1d48.html" class="title has-link-black-ter is-size-6 has-text-weight-normal">关于 hexo 对文章渲染 {{ }} 解析的问题</a>
                    <p class="is-size-7 is-uppercase">
                        <a class="has-link-grey -link" href="/categories/hexo/">hexo</a>
                    </p>
                </div>
            </div>
        </article>
        
        <article class="media">
            
            <a href="/posts/6659.html" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1102488500,1890914533&amp;fm=26&amp;gp=0.jpg" alt="初级前端综合面试题-3">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-04-26T05:14:51.000Z">2020-04-26</time></div>
                    <a href="/posts/6659.html" class="title has-link-black-ter is-size-6 has-text-weight-normal">初级前端综合面试题-3</a>
                    <p class="is-size-7 is-uppercase">
                        <a class="has-link-grey -link" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a> / <a class="has-link-grey -link" href="/categories/%E5%89%8D%E7%AB%AF/%E9%9D%A2%E8%AF%95/">面试</a>
                    </p>
                </div>
            </div>
        </article>
        
    </div>
</div>
            
            <!-- 个人信息-归档 -->
<div class="card widget">
    <div class="card-content">
        <div class="menu">
        <h3 class="menu-label">
            归档
        </h3>
        <ul class="menu-list">
        
        <li>
            <a class="level is-marginless" href="/archives/2020/05/">
                <span class="level-start">
                    <span class="level-item">五月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">4</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/archives/2020/04/">
                <span class="level-start">
                    <span class="level-item">四月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">2</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/archives/2020/03/">
                <span class="level-start">
                    <span class="level-item">三月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">8</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/archives/2020/01/">
                <span class="level-start">
                    <span class="level-item">一月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">1</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/archives/2019/12/">
                <span class="level-start">
                    <span class="level-item">十二月 2019</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">2</span>
                </span>
            </a>
        </li>
        
        </ul>
        </div>
    </div>
</div>
            
        </div>
        
    </div>


                
    

    

    

    


    <div class="column 11 is-4-tablet is-4-desktop is-3-widescreen is-hidden-touch is-hidden-desktop-only has-order-3 column-right ">
        
        <!-- 个人信息-目录 -->


    <div class="card widget" id="toc">
        <div class="card-content">
            <div class="menu">
                <h3 class="menu-label">
                    目录
                </h3>
                <ul class="menu-list"><li>
        <a class="is-flex" href="#一、cookie、sessionStorage和localStorage的区别">
        <span class="has-mr-6">1</span>
        <span>一、cookie、sessionStorage和localStorage的区别</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#1、存储大小">
        <span class="has-mr-6">1.1</span>
        <span>1、存储大小</span>
        </a></li><li>
        <a class="is-flex" href="#2、有效期">
        <span class="has-mr-6">1.2</span>
        <span>2、有效期</span>
        </a></li><li>
        <a class="is-flex" href="#3、运用场景">
        <span class="has-mr-6">1.3</span>
        <span>3、运用场景</span>
        </a></li><li>
        <a class="is-flex" href="#4、安全性、服务端通信">
        <span class="has-mr-6">1.4</span>
        <span>4、安全性、服务端通信</span>
        </a></li><li>
        <a class="is-flex" href="#5、作用域">
        <span class="has-mr-6">1.5</span>
        <span>5、作用域</span>
        </a></li><li>
        <a class="is-flex" href="#6、存储位置">
        <span class="has-mr-6">1.6</span>
        <span>6、存储位置</span>
        </a></li><li>
        <a class="is-flex" href="#7、机制不同">
        <span class="has-mr-6">1.7</span>
        <span>7、机制不同</span>
        </a></li><li>
        <a class="is-flex" href="#8、参考文献">
        <span class="has-mr-6">1.8</span>
        <span>8、参考文献</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#二、HTTP状态码">
        <span class="has-mr-6">2</span>
        <span>二、HTTP状态码</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#HTTP状态码表（版本1）-此表含状态码英文名称">
        <span class="has-mr-6">2.1</span>
        <span>HTTP状态码表（版本1） 此表含状态码英文名称</span>
        </a></li><li>
        <a class="is-flex" href="#参考文献">
        <span class="has-mr-6">2.2</span>
        <span>参考文献</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#三、HTTP的请求方式有哪几种">
        <span class="has-mr-6">3</span>
        <span>三、HTTP的请求方式有哪几种</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#HTTP-Request-Method共计15种">
        <span class="has-mr-6">3.1</span>
        <span>HTTP Request Method共计15种</span>
        </a></li><li>
        <a class="is-flex" href="#参考文献-1">
        <span class="has-mr-6">3.2</span>
        <span>参考文献</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#四、get请求和post请求的区别">
        <span class="has-mr-6">4</span>
        <span>四、get请求和post请求的区别</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#1、请求头的区别">
        <span class="has-mr-6">4.1</span>
        <span>1、请求头的区别</span>
        </a></li><li>
        <a class="is-flex" href="#2、请求参数">
        <span class="has-mr-6">4.2</span>
        <span>2、请求参数</span>
        </a></li><li>
        <a class="is-flex" href="#3、安全性">
        <span class="has-mr-6">4.3</span>
        <span>3、安全性</span>
        </a></li><li>
        <a class="is-flex" href="#4、运用场景">
        <span class="has-mr-6">4.4</span>
        <span>4、运用场景</span>
        </a></li><li>
        <a class="is-flex" href="#5、传输大小">
        <span class="has-mr-6">4.5</span>
        <span>5、传输大小</span>
        </a></li><li>
        <a class="is-flex" href="#6、其他">
        <span class="has-mr-6">4.6</span>
        <span>6、其他</span>
        </a></li><li>
        <a class="is-flex" href="#参考文献-2">
        <span class="has-mr-6">4.7</span>
        <span>参考文献</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#五、什么原因引起跨域的问题，如何解决的">
        <span class="has-mr-6">5</span>
        <span>五、什么原因引起跨域的问题，如何解决的</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#1、产生跨域的原因">
        <span class="has-mr-6">5.1</span>
        <span>1、产生跨域的原因</span>
        </a></li><li>
        <a class="is-flex" href="#2、解决跨域办法">
        <span class="has-mr-6">5.2</span>
        <span>2、解决跨域办法</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#六、keep-alive运用场景，可通过什么函数来触发-函数。">
        <span class="has-mr-6">6</span>
        <span>六、keep-alive运用场景，可通过什么函数来触发 函数。</span>
        </a></li><li>
        <a class="is-flex" href="#七、vuex-中的-store-和-store-的区别">
        <span class="has-mr-6">7</span>
        <span>七、vuex 中的 store 和 $store 的区别</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#参考文献-3">
        <span class="has-mr-6">7.1</span>
        <span>参考文献</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#八、父子组件、兄弟组件之间的传值方式">
        <span class="has-mr-6">8</span>
        <span>八、父子组件、兄弟组件之间的传值方式</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#1、父组件给子组件传值，关键字：props">
        <span class="has-mr-6">8.1</span>
        <span>1、父组件给子组件传值，关键字：props</span>
        </a></li><li>
        <a class="is-flex" href="#2、子组件给父组件传值：通过触发事件传递值">
        <span class="has-mr-6">8.2</span>
        <span>2、子组件给父组件传值：通过触发事件传递值</span>
        </a></li><li>
        <a class="is-flex" href="#3、同级组件传递数据（兄弟组件）">
        <span class="has-mr-6">8.3</span>
        <span>3、同级组件传递数据（兄弟组件）</span>
        </a></li><li>
        <a class="is-flex" href="#参考文献-4">
        <span class="has-mr-6">8.4</span>
        <span>参考文献</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#九、js-中-与-的区别？">
        <span class="has-mr-6">9</span>
        <span>九、js 中 == 与 === 的区别？</span>
        </a></li><li>
        <a class="is-flex" href="#十、webpack打包过程">
        <span class="has-mr-6">10</span>
        <span>十、webpack打包过程</span>
        </a></li><li>
        <a class="is-flex" href="#十一、-1-undefined-？，1-null-？">
        <span class="has-mr-6">11</span>
        <span>十一、 1+undefined = ？，1+null = ？</span>
        </a></li><li>
        <a class="is-flex" href="#十二、es6中模板字符串一共有几种用法，分别是？">
        <span class="has-mr-6">12</span>
        <span>十二、es6中模板字符串一共有几种用法，分别是？</span>
        </a></li></ul>
            </div>
        </div>
    </div>

        
        <!-- 最近/最新的文章 -->
<div class="card widget">
    <div class="card-content">
        <h3 class="menu-label">
            最新文章
        </h3>
        
        <article class="media">
            
            <a href="/posts/7358.html" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="https://cn.vuejs.org/images/logo.png" alt="component组件嵌套，导致页面重复渲染，重复请求的bug">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-05-23T02:18:20.000Z">2020-05-23</time></div>
                    <a href="/posts/7358.html" class="title has-link-black-ter is-size-6 has-text-weight-normal">component组件嵌套，导致页面重复渲染，重复请求的bug</a>
                    <p class="is-size-7 is-uppercase">
                        <a class="has-link-grey -link" href="/categories/vue/">vue</a>
                    </p>
                </div>
            </div>
        </article>
        
        <article class="media">
            
            <a href="/posts/2b18.html" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="https://cn.vuejs.org/images/logo.png" alt="vue异步加载模块">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-05-22T23:18:18.000Z">2020-05-23</time></div>
                    <a href="/posts/2b18.html" class="title has-link-black-ter is-size-6 has-text-weight-normal">vue异步加载模块</a>
                    <p class="is-size-7 is-uppercase">
                        <a class="has-link-grey -link" href="/categories/vue/">vue</a>
                    </p>
                </div>
            </div>
        </article>
        
        <article class="media">
            
            <a href="/posts/54f1.html" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="https://panjiachen.gitee.io/vue-element-admin-site/home.png" alt="vue-admin-template模板添加tagsview">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-05-02T16:22:02.000Z">2020-05-03</time></div>
                    <a href="/posts/54f1.html" class="title has-link-black-ter is-size-6 has-text-weight-normal">vue-admin-template模板添加tagsview</a>
                    <p class="is-size-7 is-uppercase">
                        <a class="has-link-grey -link" href="/categories/vue/">vue</a>
                    </p>
                </div>
            </div>
        </article>
        
        <article class="media">
            
            <a href="/posts/1d48.html" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1051132835,1344326547&amp;fm=26&amp;gp=0.jpg" alt="关于 hexo 对文章渲染 {{ }} 解析的问题">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-05-02T09:40:49.000Z">2020-05-02</time></div>
                    <a href="/posts/1d48.html" class="title has-link-black-ter is-size-6 has-text-weight-normal">关于 hexo 对文章渲染 {{ }} 解析的问题</a>
                    <p class="is-size-7 is-uppercase">
                        <a class="has-link-grey -link" href="/categories/hexo/">hexo</a>
                    </p>
                </div>
            </div>
        </article>
        
        <article class="media">
            
            <a href="/posts/6659.html" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1102488500,1890914533&amp;fm=26&amp;gp=0.jpg" alt="初级前端综合面试题-3">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-04-26T05:14:51.000Z">2020-04-26</time></div>
                    <a href="/posts/6659.html" class="title has-link-black-ter is-size-6 has-text-weight-normal">初级前端综合面试题-3</a>
                    <p class="is-size-7 is-uppercase">
                        <a class="has-link-grey -link" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a> / <a class="has-link-grey -link" href="/categories/%E5%89%8D%E7%AB%AF/%E9%9D%A2%E8%AF%95/">面试</a>
                    </p>
                </div>
            </div>
        </article>
        
    </div>
</div>
        
        <!-- 个人信息-归档 -->
<div class="card widget">
    <div class="card-content">
        <div class="menu">
        <h3 class="menu-label">
            归档
        </h3>
        <ul class="menu-list">
        
        <li>
            <a class="level is-marginless" href="/archives/2020/05/">
                <span class="level-start">
                    <span class="level-item">五月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">4</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/archives/2020/04/">
                <span class="level-start">
                    <span class="level-item">四月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">2</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/archives/2020/03/">
                <span class="level-start">
                    <span class="level-item">三月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">8</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/archives/2020/01/">
                <span class="level-start">
                    <span class="level-item">一月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">1</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/archives/2019/12/">
                <span class="level-start">
                    <span class="level-item">十二月 2019</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">2</span>
                </span>
            </a>
        </li>
        
        </ul>
        </div>
    </div>
</div>
        
        
    </div>


            </div>
        </div>
    </section>
    <footer class="footer">
    <div class="container">
        <div class="level">
            <div class="level-start has-text-centered-mobile">
                <!-- <a class="footer-logo is-block has-mb-6" href="/">
                    
                    <img src="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.5/images/foxlogo.png" alt="初级前端综合面试题-1" height="28">
                    
                </a> -->
                <p class="is-size-7">

                    
                    <!-- 不蒜子统计 -->
                    <span id="busuanzi_container_site_uv">
                        ❤️ 感谢 <span id="busuanzi_value_site_uv">0</span> 位小伙伴
                        的 <span id="busuanzi_value_page_pv">0</span> 次陪伴
                    </span>
                    

                    
                        <br>
                        <span id="sitetime">载入运行时间...</span>
                        <script>
                            function siteTime() {
                                var seconds = 1000;
                                var minutes = seconds * 60;
                                var hours = minutes * 60;
                                var days = hours * 24;
                                var years = days * 365;
                                var today = new Date();
                                var startYear = "2020";
                                var startMonth = "3";
                                var startDate = "08";
                                var startHour = "0";
                                var startMinute = "0";
                                var startSecond = "0";
                                var todayYear = today.getFullYear();
                                var todayMonth = today.getMonth() + 1;
                                var todayDate = today.getDate();
                                var todayHour = today.getHours();
                                var todayMinute = today.getMinutes();
                                var todaySecond = today.getSeconds();
                                var t1 = Date.UTC(startYear, startMonth, startDate, startHour, startMinute, startSecond);
                                var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond);
                                var diff = t2 - t1;
                                var diffYears = Math.floor(diff / years);
                                var diffDays = Math.floor((diff / days) - diffYears * 365);
                                var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours);
                                var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) /
                                    minutes);
                                var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours -
                                    diffMinutes * minutes) / seconds);
                                if (startYear == todayYear) {
                                    // document.getElementById("year").innerHTML = todayYear;
                                    document.getElementById("sitetime").innerHTML = "本站已安全运行 " + diffDays + " 天 " + diffHours +
                                        " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒";
                                } else {
                                    // document.getElementById("year").innerHTML = startYear + " - " + todayYear;
                                    document.getElementById("sitetime").innerHTML = "本站已安全运行 " + diffYears + " 年 " + diffDays +
                                        " 天 " + diffHours + " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒";
                                }
                            }
                            setInterval(siteTime, 1000);
                        </script>
                    

                    <!-- 站长统计 -->
                    
                        <br>
                        <script type="text/javascript">
                            document.write(unescape("%3Cspan id='cnzz_stat_icon_1278694833'%3E%3C/span%3E%3Cscript src='https://s9.cnzz.com/z_stat.php%3Fid%3D1278694833%26online%3D1%26show%3Dline' type='text/javascript'%3E%3C/script%3E"));
                        </script>
                    

                    <!-- 域名信息 -->
                    
                    <br>
                    <span id="icp"><img src="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.0/source/medias/icp.png"
                            style="vertical-align: text-bottom;" />
                        <a href="http://beian.miit.gov.cn/state/outPortal/loginPortal.action" target="_blank">渝ICP备18015404号</a>
                    </span>
                    

                    <br>
                    <!-- 版权信息 -->
                    
                    &copy; 2020 Fox&nbsp;
                    Powered by <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a> & <a
                        href="https://github.com/ppoffice/hexo-theme-icarus" target="_blank" rel="noopener">Icarus</a>
                    & <a href="https://foxhuli.top/" target="_blank" rel="noopener">Fox</a>
                </p>
            </div>

            <!-- 访问链接 -->
            <div class="level-end">
                
                <div class="field has-addons is-flex-center-mobile has-mt-5-mobile is-flex-wrap is-flex-middle">
                    
                    <p class="control">
                        <a class="button is-white is-large" target="_blank"
                            rel="noopener" title="掘金"
                            href="https://juejin.im/user/5d36544b6fb9a07efd474ae0/">
                            
                                
                                    <span>掘</span>
                                
                            
                        </a>
                    </p>
                    
                    <p class="control">
                        <a class="button is-white is-large" target="_blank"
                            rel="noopener" title="简书"
                            href="https://www.jianshu.com/u/e1f2e756cb5e/">
                            
                                
                                    <span>简</span>
                                
                            
                        </a>
                    </p>
                    
                    <p class="control">
                        <a class="button is-white is-large" target="_blank"
                            rel="noopener" title="知乎"
                            href="https://www.zhihu.com/people/hu-li-60-36-4/activities/">
                            
                                
                                    <span>知</span>
                                
                            
                        </a>
                    </p>
                    
                    <p class="control">
                        <a class="button is-white is-large" target="_blank"
                            rel="noopener" title="CDSN"
                            href="https://blog.csdn.net/xiaohuli_hyr/">
                            
                                
                                    <span>C</span>
                                
                            
                        </a>
                    </p>
                    
                    <p class="control">
                        <a class="button is-white is-large" target="_blank"
                            rel="noopener" title="My GitHub"
                            href="https://github.com/foxhuli229?tab=repositories">
                            
                                
                                    <i class="fab fa-github"></i>
                                
                            
                        </a>
                    </p>
                    
                </div>
                
            </div>

        </div>
    </div>
</footer>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.22.2/min/moment-with-locales.min.js"></script>
<script>moment.locale("zh-CN");</script>


<script>
var IcarusThemeSettings = {
    site: {
        url: 'https://foxhuli.top',
        external_link: {"enable":true,"exclude":[]}
    },
    article: {
        highlight: {
            clipboard: true,
            fold: 'unfolded'
        }
    }
};
</script>


<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.4/dist/clipboard.min.js" defer></script>





<script src="/js/animation.js"></script>



<script src="https://cdn.jsdelivr.net/npm/lightgallery@1.6.8/dist/js/lightgallery.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/justifiedGallery@3.7.0/dist/js/jquery.justifiedGallery.min.js" defer></script>
<script src="/js/gallery.js" defer></script>



<div id="outdated">
    <h6>Your browser is out-of-date!</h6>
    <p>Update your browser to view this website correctly. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/">Update
            my browser now </a></p>
    <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">&times;</a></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/outdatedbrowser@1.1.5/outdatedbrowser/outdatedbrowser.min.js" defer></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        outdatedBrowser({
            bgColor: '#f25648',
            color: '#ffffff',
            lowerThan: 'flex'
        });
    });
</script>





<a id="back-to-top" title="回到顶端" href="javascript:;">
    <i class="fas fa-chevron-up"></i>
</a>
<script src="/js/back-to-top.js" defer></script>














<script src="/js/main.js" defer></script>

    
    <div class="searchbox ins-search">
    <div class="searchbox-container ins-search-container">
        <div class="searchbox-input-wrapper">
            <input type="text" class="searchbox-input ins-search-input" placeholder="想要查找什么..." />
            <span class="searchbox-close ins-close ins-selectable"><i class="fa fa-times-circle"></i></span>
        </div>
        <div class="searchbox-result-wrapper ins-section-wrapper">
            <div class="ins-section-container"></div>
        </div>
    </div>
</div>
<script>
    (function (window) {
        var INSIGHT_CONFIG = {
            TRANSLATION: {
                POSTS: '文章',
                PAGES: '页面',
                CATEGORIES: '分类',
                TAGS: '标签',
                UNTITLED: '(无标题)',
            },
            CONTENT_URL: '/content.json',
        };
        window.INSIGHT_CONFIG = INSIGHT_CONFIG;
    })(window);
</script>
<script src="/js/insight.js" defer></script>
<link rel="stylesheet" href="/css/search.css">
<link rel="stylesheet" href="/css/insight.css">
    
    

    <script src="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.0/source/libs/jquery/jquery.min.js"></script>

    <!-- 引用 鼠标点击实现文字效果 -->
    <script src="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.0/source/js/click_show_text.js"></script>

    <!-- //只在桌面版网页启用特效 -->
    <!-- <script type="text/javascript">
        var windowWidth = $(window).width();
        if (windowWidth > 768) {
            document.write('<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.0/source/js/sakura.js"><\/script>');
        }
    </script> -->

     <!-- 实现 鼠标划过彩虹星星掉落跟随效果 -->
     <!-- <script src="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.0/source/js/cursor.js"></script> -->

      <!-- tidio聊天工具 -->
    <!-- <script src="//code.tidio.co/hcpgs6vy7zc60cdqvx033yuue25y9vgj.js" async></script> -->

<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
        tex2jax: {
            inlineMath: [ ["$","$"], ["\\(","\\)"] ],
            skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'],
            processEscapes: true
        }
    });
    MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax();
        for (var i = 0; i < all.length; ++i)
            all[i].SourceElement().parentNode.className += ' has-jax';
    });
</script>
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script>if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js?t=1590368958168')
    .then(function () {console.log('ServiceWorker Register Successfully.')})
    .catch(function (e) {console.error(e)});
}
</script><script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/shizuku.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"log":false});</script></body>
</html>